<template>
	<div class="pageSetting">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:toolbar-config="toolbarConfig"
			:pager-config="pageConfig"
			:edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
			@page-change="pageChange"
		>
			<template #whetherEnable="{ row }">
				<span>{{ whetherEnableObject[row.whetherEnable] }}</span>
			</template>
			<template #toolbar_buttons>
				<el-input
					v-model="tagData"
					placeholder="标签名称名称"
					size="small"
					style="width: 200px"
					clearable
					@keyup.enter.native="handlerSearch"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="handlerSearch"
					/>
				</el-input>
				<el-button type="primary" size="small" @click="handlerAddClick">
					新增
				</el-button>
			</template>
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerEditRow(row)">
					编辑
				</el-button>
			</template>
		</shyt-table>

		<tagData
			:form-title="formTitle"
			:visible.sync="visible"
			:cur-data.sync="curData"
			@submit="handlerSubmit"
		></tagData>
	</div>
</template>

<script>
import { tagInsert, getTagPageList, tagUpdate } from '@/http/article'

import tagData from './components/tagDataForm.vue'
export default {
	name: 'ArticleSetting',
	components: {
		tagData,
	},
	data() {
		return {
			//分页配置
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 100,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},

			//查询参数(标签)
			tagData: '',
			tableData: [], //表格数据
			$table: null,
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			formTitle: '', //表单标题
			visible: false,
			orgList: [], //组织机构
			curData: {}, //表单页面数组
		}
	},

	created() {
		//表格页面
		this.setTableColumn()
		//初始化分页数据
		this.pageList()
	},
	mounted() {
		this.$table = this.$refs.shytTable.$refs.xTable
	},
	methods: {
		//  设置表格列
		setTableColumn() {
			let _this = this
			_this.columns = [
				{
					field: 'orgName',
					title: '所属医院',
				},
				{
					field: 'tagData',
					title: '标签',
				},
				{
					field: 'tagCount',
					title: '引用次数',
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			]
		},

		//查询
		handlerSearch() {
			this.pageList()
		},
		// 翻页事件
		pageChange({ currentPage, pageSize }) {
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
			this.pageList()
		},

		//获得分页数据
		pageList() {
			let queryParams = {
				pageNum: this.pageConfig.currentPage,
				pageSize: this.pageConfig.pageSize,
				tagData: this.tagData,
			}
			getTagPageList(queryParams).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.tableData = data.data.records
					this.pageConfig.total = data.data.total
				}
			})
		},
		//提交数据
		handlerSubmit(formData) {
			let res = { ...formData }
			if (res.id == undefined) {
				tagInsert(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('新增成功')
						this.visible = false
						this.pageList()
					}
				})
			} else {
				tagUpdate(res).then(({ data }) => {
					if (data?.head?.code == 200) {
						this.$message.success('编辑成功')
						this.visible = false
						this.pageList()
					}
				})
			}
		},
		//新增数据
		handlerAddClick() {
			this.formTitle = '文章资讯新增'
			this.visible = true
		},
		//编辑数据
		handlerEditRow(row) {
			this.formTitle = '文章资讯编辑'
			this.curData = {
				...row,
			}
			this.visible = true
		},
	},
}
</script>

<style lang="scss" scoped>
.dictSetting {
	height: 100%;
	display: flex;
	.dictSetting-left {
		border-right: 1px solid #ccc;
		padding: 10px;
		box-sizing: border-box;
		width: 40%;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.type-list {
			height: calc(100% - 22px - 28px);
			padding-top: 20px;
			box-sizing: border-box;
			.item-active {
				background: #ecf5ff;
			}
			.type-list-item {
				height: 40px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #e4e7ed;
				box-sizing: border-box;
				transition: all 0.3s;
				&:first-child {
					border-top: 1px solid #e4e7ed;
				}
				&:hover {
					background: #e4e7ed;
				}
			}
			.type-list-none {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				font-weight: 500;
				color: #909399;
			}
		}
	}
	.dictSetting-right {
		flex: 1;
		padding: 10px;
		box-sizing: border-box;
		box-align: border-box;
		h4 {
			padding: 0px;
			margin: 0 0 10px 0;
		}
		.searchBar {
			display: flex;
			justify-content: space-between;
		}
		.article-list {
			padding-top: 20px;
			box-sizing: border-box;
			height: calc(100% - 22px - 28px);
		}
	}
}
</style>
